<template>
	<view class="detailsPage paper customTitleBar" :style="{borderTopWidth:statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar tabs-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<text class="tabs-item" @click="toHundredFamilySurnames">百家姓</text>
			<text class="tabs-item selected" @click="toPaper">论文</text>
			<text class="tabs-item" @click="toCase">案例</text>
			<text class="tabs-item" @click="toSurnameOrigin">姓氏来源</text>
		</view>
		<view class="search-bar">
			<view class="search-form">
				<input type="text" placeholder="搜索关键字查询" v-model="searchInput" confirm-type="search" @confirm="dofing">
				<view class="btn-clear" @click.stop="clearInput" v-show="searchInput !=''">清除</view>
			</view>
		</view>
		<view class="container-wrap">
			<view class="container news-list">
				<view class="news-item"  @click="toDetails(item.articleId)"  v-for="(item, index) in articleList">
					<view class="content">
						<view class="title"><text>{{item.articleTitle}}</text></view>
						<view class="column"><text>{{item.articleTrunfrom}}</text><text class="read-num">{{item.articleBrowse}} 阅读</text></view>
					</view>
					<view class="pic" v-if="item.attachmentUrl!=null"><image :src="baseUrl+item.attachmentUrl"></image></view>
				</view>
				<!-- <view class="news-item" @click="toDetails">
					<view class="content">
						<view class="title"><text>肿瘤是一类严重威胁人民健康和生命的多发病和常见病</text></view>
						<view class="column"><text>新华网</text><text class="read-num">4132 阅读</text></view>
					</view>
					<view class="pic"><image src="/static/img/temp/temp_01.jpg"></image></view>
				</view>
				<view class="news-item" @click="toDetails">
					<view class="content">
						<view class="title"><text>肿瘤是一类严重威胁人民健康和生</text></view>
						<view class="column"><text>新华网</text><text class="read-num">4132 阅读</text></view>
					</view>
					<view class="pic"><image src="/static/img/temp/temp_01.jpg"></image></view>
				</view>
				<view class="news-item" @click="toDetails">
					<view class="content">
						<view class="title"><text>肿瘤是一类严重威胁人民健康和生命的多发病和常见病</text></view>
						<view class="column"><text>新华网</text><text class="read-num">4132 阅读</text></view>
					</view>
					<view class="pic"><image src="/static/img/temp/temp_01.jpg"></image></view>
				</view>
				<view class="news-item" @click="toDetails">
					<view class="content">
						<view class="title"><text>肿瘤是一类严重威胁人民健康和生命的多发病和常见病</text></view>
						<view class="column"><text>新华网</text><text class="read-num">4132 阅读</text></view>
					</view>
					<view class="pic"><image src="/static/img/temp/temp_01.jpg"></image></view>
				</view>
				<view class="news-item" @click="toDetails">
					<view class="content">
						<view class="title"><text>肿瘤是一类严重威胁人民健康和生命的多发病和常见病</text></view>
						<view class="column"><text>新华网</text><text class="read-num">4132 阅读</text></view>
					</view>
					<view class="pic"><image src="/static/img/temp/temp_01.jpg"></image></view>
				</view> -->
			</view>
		</view>
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
	</view>
</template>

<script>
	import { getArticleList} from '@/common/api.js';
	// 引入配置
	import config from '@/common/config'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				customTitleBarBg: 'rgba(250,250,250,1)',
				statusBarHeight: statusBarHeight,
				searchInput: '',
				articleList:[],
				baseUrl:null
			}
		},
		onLoad(options) {
			this.baseUrl=config.baseUrl;
			
		},onShow() {
			this.getArticleList();
		},
		methods: {
			getArticleList(){
				// get请求 1论文 2案例
				getArticleList({params:{ 'articleType':1,'searchInput':this.searchInput}}).then(data => {
					console.log(data)
					this.articleList=data;
				
				}).catch(() =>{
					
				})
			},dofing(){
				this.getArticleList();
			},
			clearInput() {
				this.searchInput = '';
			},
			toDetails(articleId) {
				uni.navigateTo({
					url: '../details/details?articleId='+articleId,
				});
			},
			toHundredFamilySurnames() {
				uni.redirectTo({
					url: '../hundredFamilySurnames/hundredFamilySurnames',
				});
			},
			toCase() {
				uni.redirectTo({
					url: '../case/case',
				});
			},
			toPaper() {
				uni.redirectTo({
					url: '../paper/paper',
				});
			},
			toSurnameOrigin() {
				uni.redirectTo({
					url: '../surnameOrigin/surnameOrigin',
				});
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toPersonalCenter() {
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				});
			}
			
		}
	}
</script>

<style>
	page{background-color: #fff;}
</style>